<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-Type" content="text/html"  charset="utf-8"/>
<title>机票订购</title>


<link rel="stylesheet" href="css/basic.css" charset="utf-8">
<link rel="stylesheet" href="css/lvyouzixun.css" charset="utf-8">
</head>

<body>
		

	<header id="header"> 
			
		<div class="center">
			<h1 class="logo">旅行社</h1>
				<nav class="link">
				<h2 class="none">网站导航</h2>
					<ul >
						<li><a class="active" href="index.html">首页</a></li>
						<li><a class="active" href="information.html">旅游咨询</a></li>
						<li><a class="active" href="ticket.html">机票订购</a></li>
						<li><a class="active" href="view.html">风景欣赏</a></li>
						<li><a class="active" href="company.html">公司简介</a></li>
						
					</ul>
				</nav>
			</div>
	</header>

	
		<div id="headline">
			<div class="center">
				<hgroup>  <!--hgroup为标题组合群组，统一规范h-->
					<h2>旅游咨询</h2>
					<h3>介绍各种最新旅游信息、资讯要闻、景点攻略等</h3>
				</hgroup>
			</div>
		</div>
		<!-- 模块区域，先id，子级用class -->
		<div id="container">
			<aside class="sidebar">
			<!-- 侧栏aside -->
				<div class="sidebox recommed">
					<h2>景点推荐</h2>
						<div class="tag">
							<ul>
								<li><a href="###">曼谷(12)</a></li>
								<li><a href="###">日本(5)</a></li>
								<li><a href="###">香港(2)</a></li>
								<li><a href="###">美国(82)</a></li>
								<li><a href="###">拉萨(15)</a></li>
								<li><a href="###">意大利(12)</a></li>
								<li><a href="###">马尔代夫(32)</a></li>
								<li><a href="###">希腊(8)</a></li>
								<li><a href="###">新西兰(2)</a></li>
								<li><a href="###">英国(22)</a></li>
								<li><a href="###">毛里求斯(62)</a></li>
								<li><a href="###">埃及(32)</a></li>
								<li><a href="###">迪拜(22)</a></li>
								<li><a href="###">首尔(12)</a></li>
								<li><a href="###">新加坡(20)</a></li>
								<li><a href="###">台湾(30)</a></li>
								<li><a href="###">泰国(42)</a></li>
								<li><a href="###">马来西亚(26)</a></li>
								<li><a href="###">大阪(100)</a></li>
								<li><a href="###">越南(10)</a></li>
								<li><a href="###">澳大利亚(66)</a></li>
							</ul>
						</div>
				</div>
				<div class="sidebox hot">
					<h2>热门旅游</h2>
						<div class="figure">
							<figure>
								<img src="img/hot1.jpg" alt="曼谷-芭提雅6日游">
								<!-- figcaption为在图片下加文字 -->
								<figcaption>
									曼谷-芭提雅6日游
							    </figcaption>
							</figure>
							<figure>
								<img src="img/hot1.jpg" alt="曼谷-芭提雅6日游">
								<!-- figcaption为在图片下加文字 -->
								<figcaption>
									曼谷-芭提雅6日游
							    </figcaption>
							</figure>
							<figure>
								<img src="img/hot1.jpg" alt="曼谷-芭提雅6日游">
								<!-- figcaption为在图片下加文字 -->
								<figcaption>
									水龙湾6日游
							    </figcaption>
							</figure>
							<figure>
								<img src="img/hot1.jpg" alt="曼谷-芭提雅6日游">
								<!-- figcaption为在图片下加文字 -->
								<figcaption>
									曼谷-芭提雅6日游
							    </figcaption>
							</figure>
							<figure>
								<img src="img/hot1.jpg" alt="曼谷-芭提雅6日游">
								<!-- figcaption为在图片下加文字 -->
								<figcaption>
									曼谷-芭提雅6日游
							    </figcaption>
							</figure>
							<figure>
								<img src="img/hot1.jpg" alt="曼谷-芭提雅6日游">
								<!-- figcaption为在图片下加文字 -->
								<figcaption>
									曼谷-清迈7日游
							    </figcaption>
							</figure>
							<figure>
								<img src="img/hot1.jpg" alt="曼谷-芭提雅6日游">
								<!-- figcaption为在图片下加文字 -->
								<figcaption>
									海岸7日游
							    </figcaption>
							</figure>
							<figure>
								<img src="img/hot1.jpg" alt="曼谷-芭提雅6日游">
								<!-- figcaption为在图片下加文字 -->
								<figcaption>
									曼谷-芭提雅6日游
							    </figcaption>
							</figure>
						</div>
				</div>
				<div class="sidebox treasure"><!--此处为头的名字，子级h2，在div区域块内放超链接-->
					<h2>旅游百宝箱</h2>
						<div class="box">
							<a href="###" class="trea1">天气预报</a>
							<a href="###" class="trea1">火车票查询</a>
							<a href="###" class="trea1">航空查询</a>
							<a href="###" class="trea1">地铁线路查询</a>
							<a href="###" class="trea1">公交线路查询</a>
							<a href="###" class="trea1">酒店预订</a>
							<a href="###" class="trea1">保险</a>
							<a href="###" class="trea1">签证</a>

						</div>
			    </div>
			</aside>
			
			<div class="list ticket">
				<form action="###">
					<h2>机票预订</h2>	<!--4个模块区域-->
					<div class="type"> 
						<p>航班类型:<mark>单程</mark>往返</p>
					</div>
					
						<div class="form left">
								<p>
									<label for="">出发城市</label>
									<input type="text" name="from_city" id="from_city"  placeholder="城市名 ">
								</p>
								<p>
									<label for="">返回城市</label>
									<input type="text" name="to_city" id="to_city"  placeholder="城市名 ">
								</p>
						</div> 
					
						 <div class="form right">
								<p>
									<label for="">出发时间</label>
									<input type="text" name="from_time" id="from_time"  placeholder="时间/日期">
								</p>
								<p>
									<label for="">返回时间</label>
									<input type="text" name="to_time" id="to_time"  placeholder="时间/日期">
								</p>
						</div> 
					 <div class="form button">
								<button type="submit" class="submit">订票</button>
					</div> 
					 
					</form>
				<div class="new">
					<h2>最新机票</h2>
						<ul>
							<li>热门城市:</li>
							<li>北京</li>
							<li>上海</li>
							<li>广州</li>
							<li>深圳</li>
							<li>重庆</li>
							<li>成都</li>
							<li>杭州</li>
							<li>南京</li>					
						</ul>
						<table>
							<thead>
								<tr> <!--标题th-->
									<th>路线</th>
									<th>日期</th>
									<th>价格</th>
									<th>税费</th>
									<th>餐食</th>
									<th>航班</th>
									<th>预订</th>
								</tr>
							</thead>
								
							<tbody>
								<tr> <!--单元格td-->
									<td>北京-成都</td>
									<td>10-15</td>
									<td class="price">¥745</td>
									<td>¥50</td>
									<td>有</td>
									<td>春秋航空</td>
									<td><a href="###" class="reserve">预订</a></td>
								</tr>
								<tr> <!--单元格td-->
									<td>北京-上海</td>
									<td>10-15</td>
									<td class="price">¥545</td>
									<td>¥50</td>
									<td>有</td>
									<td>春秋航空</td>
									<td><a href="###" class="reserve">预订</a></td>
								</tr>
								<tr> <!--单元格td-->
									<td>北京-深圳</td>
									<td>10-15</td>
									<td class="price">¥800</td>
									<td>¥50</td>
									<td>有</td>
									<td>春秋航空</td>
									<td><a href="###" class="reserve">预订</a></td>
								</tr>
								<tr> <!--单元格td-->
									<td>北京-杭州</td>
									<td>10-15</td>
									<td class="price">¥555</td>
									<td>¥50</td>
									<td>有</td>
									<td>春秋航空</td>
									<td><a href="###" class="reserve">预订</a></td>
								</tr>
								<tr> <!--单元格td-->
									<td>北京-广州</td>
									<td>10-15</td>
									<td class="price">¥1200</td>
									<td>¥50</td>
									<td>有</td>
									<td>春秋航空</td>
									<td><a href="###" class="reserve">预订</a></td>
								</tr>
								<tr> <!--单元格td-->
									<td>北京-重庆</td>
									<td>10-15</td>
									<td class="price">¥885</td>
									<td>¥50</td>
									<td>有</td>
									<td>春秋航空</td>
									<td><a href="###" class="reserve">预订</a></td>
								</tr>
								<tr> <!--单元格td-->
									<td>北京-昆明</td>
									<td>10-15</td>
									<td class="price">¥500</td>
									<td>¥50</td>
									<td>有</td>
									<td>春秋航空</td>
									<td><a href="###" class="reserve">预订</a></td>
								</tr>
								<tr> <!--单元格td-->
									<td>北京-厦门</td>
									<td>10-15</td>
									<td class="price">¥995</td>
									<td>¥50</td>
									<td>有</td>
									<td>春秋航空</td>
									<td><a href="###" class="reserve">预订</a></td>
								</tr>
								<tr> <!--单元格td-->
									<td>北京-长沙</td>
									<td>10-15</td>
									<td class="price">¥665</td>
									<td>¥55</td>
									<td>有</td>
									<td>春秋航空</td>
									<td><a href="###" class="reserve">预订</a></td>
								</tr>
							
							</tbody>
						
							<tfoot>
								<tr>
									<td colspan="7"><a href="###" class="more">加载更多航班...</td>
								
								</tr>							
							</tfoot>																							
						</table>
				</div>								
			</div>
		</div>
	
		<footer class="footer">
			<div id="top">
				<!--采用2个class，公共部分修改和独有修改维护方便 -->
				<div class="block left"> 
					<h3>合作伙伴</h3>
					<hr><!--加一个横线-->
					<ul>
						<li>途牛旅游网</li>
						<li>驴妈妈旅游网</li>
						<li>携程旅游网</li>
						<li>中国青年旅行社</li>
					</ul>					
				</div>
				
				<div class="block center11">
				    <h3>旅游FAQ</h3>
					<hr>
					<ul>
						<li>旅游合同签订方式</li>
						<li>儿童价是基于什么制定的?</li>
						<li>旅游的线路品质怎么界定的？</li>
						<li>单房差是什么?</li>
						<li>旅游保险有那些种类?</li>
					</ul>	
				</div>
				
				
				<div class="block right">
					<h3>联系方式</h3>
					<hr>
					<ul>
						<li>微博:weibo.com/ycku</li>
						<li>邮件:252189983@qq.com</li>
						<li>地址:辽宁省xxx路</li>
					</ul>								
							
				</div>
			</div>
			
			<div class="bottom">Copyright@YCUC 旅行社 | 中IUP程1516481号 | 旅行社经营许可证：ad-079797</div>
			
		</footer>
		</div>

	
</body>
</html>